<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../polymer.html">
</head>
<body>
  <dom-module id="my-element">
    <template>
      <style>
        div {
          height: 50px;
          width: 50px;
          color: var(--text-color);
        }

        :host {
          display: block;
          background: blue;
          height: 100px;
          --text-color: white;
        }

        :host([foo]) {
          --text-color: black;
        }

        :host-context([bar]) {
          --text-color: lightgray;
        }
      </style>

      <div id="inner">text</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'my-element'
      });
    });
    </script>
  </dom-module>

  <dom-module id="my-type-extension">
    <template>
      <style>
        div {
          height: 50px;
          width: 50px;
          color: var(--text-color);
        }

        :host {
          display: block;
          background: blue;
          height: 100px;
          --text-color: white;
        }

        :host([foo]) {
          --text-color: black;
        }

        :host-context([bar]) {
          --text-color: lightgray;
        }
      </style>

      <div id="inner">text</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'my-type-extension',
        extends: 'div'
      });
    });
    </script>
  </dom-module>

  <test-fixture id="test">
    <template>
      <div id="owner" bar>
        <my-element id="element" foo></my-element>
      </div>
    </template>
  </test-fixture>

  <test-fixture id="test-type-extension">
    <template>
      <div id="owner" bar>
        <div is="my-type-extension" id="element" foo></div>
      </div>
    </template>
  </test-fixture>

  <script>
  suite('Style Cache', function() {

    var owner, element, inner;
    setup(function() {
      owner = fixture('test');
      element = owner.querySelector('#element');
      inner = element.$.inner;
    });

    suite('scope cache', function() {
      test(':host-context()', function() {
        assert.equal(getComputedStyle(inner).color, 'rgb(211, 211, 211)');
        owner.removeAttribute('bar');
        element.updateStyles();
        assert.equal(getComputedStyle(inner).color, 'rgb(0, 0, 0)');
      });

      test(':host()', function() {
        owner.removeAttribute('bar');
        element.updateStyles();
        assert.equal(getComputedStyle(inner).color, 'rgb(0, 0, 0)');
        element.removeAttribute('foo');
        element.updateStyles();
        assert.equal(getComputedStyle(inner).color, 'rgb(255, 255, 255)');
      });
    });

    suite('global cache', function() {
      test(':host-context', function() {
        owner.removeAttribute('bar')
        element.updateStyles();
        assert.include(element.className, 'my-element-1');
        owner.setAttribute('bar', '');
        element.updateStyles();
        assert.include(element.className, 'my-element-0');
      });

      test(':host()', function() {
        assert.include(element.className, 'my-element-0');
        owner.removeAttribute('bar');
        element.removeAttribute('foo');
        element.updateStyles();
        assert.include(element.className, 'my-element-2');
        element.setAttribute('foo', '');
        element.updateStyles();
        assert.include(element.className, 'my-element-1');
      });
    });
  });

  suite('Style Cache Type Extension', function() {

    var owner, element, inner;
    setup(function() {
      owner = fixture('test-type-extension');
      element = owner.querySelector('#element');
      inner = element.$.inner;
    });

    suite('scope cache', function() {
      test(':host-context()', function() {
        assert.equal(getComputedStyle(inner).color, 'rgb(211, 211, 211)');
        owner.removeAttribute('bar');
        element.updateStyles();
        assert.equal(getComputedStyle(inner).color, 'rgb(0, 0, 0)');
      });

      test(':host()', function() {
        owner.removeAttribute('bar');
        element.updateStyles();
        assert.equal(getComputedStyle(inner).color, 'rgb(0, 0, 0)');
        element.removeAttribute('foo');
        element.updateStyles();
        assert.equal(getComputedStyle(inner).color, 'rgb(255, 255, 255)');
      });
    });

    suite('global cache', function() {
      test(':host-context', function() {
        owner.removeAttribute('bar')
        element.updateStyles();
        assert.include(element.className, 'my-type-extension-1');
        owner.setAttribute('bar', '');
        element.updateStyles();
        assert.include(element.className, 'my-type-extension-0');
      });

      test(':host()', function() {
        assert.include(element.className, 'my-type-extension-0');
        owner.removeAttribute('bar');
        element.removeAttribute('foo');
        element.updateStyles();
        assert.include(element.className, 'my-type-extension-2');
        element.setAttribute('foo', '');
        element.updateStyles();
        assert.include(element.className, 'my-type-extension-1');
      });
    });
  });
  </script>
</body>
</html>
